<template>
  <div class="video-el-dialog">
    <div class="vi">
      <div class="an"></div>
      <div id="video-container"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import videoClass from "@/utils/videoClass.js";

@Component
export default class extends Vue {
  @Prop() videoTitle!: any[];

  // 门襟状态
  videoStatus: boolean = false;

  // 弹框关闭前的回调
  handleClose() {
    this.videoStatus = false;
    console.log("弹框关闭前的回调");
  }

  aa = null;
  bb = [];
  options = {
    appkey: "20496996",
    secret: "3aP7Qjv5E5J39LtA1As7",
    ip: "10.192.102.55",
    port: 20443,
    layout: "1x1",
  };
  handelCilck(e) {
    // this.bb = [...new Set(this.videoCodeList.flat())];
    //code视频编码
    // this.aa._cameraIndexCodeList = this.bb;
    this.aa._cameraIndexCodeList.push("6f68798cfac041e39c847262792ca08c");
    this.aa.preview();
  }

  getArtemisConfig() {
    // ip key 相关
    // (this as any).$services
    //   .getArtemisConfig()
    //   .then((result: any) => {
    //     let { data } = result;
    //     this.options = data;
    //     console.log("result", result);
    //   })
    //   .catch((err: object) => {
    //     console.log(err);
    //   });
  }

  mounted() {
    // this.getArtemisConfig();

    this.aa = new videoClass(this.options);
    console.log("initvideo", this.options);
  }
  //关闭视频窗口
  beforeDestroy() {
    if (this.aa) {
      this.aa.stop();
      this.aa._cameraIndexCodeList = [];
    }
  }
}
</script>

<style lang="scss" scoped>
#video-container {
  position: absolute;
  top: 1rem;
  width: 10rem;
  height: 8rem;
}
</style>
